<template>
  <div class="search">
    <div class="input-value">
      <form action="" @submit.prevent="getSearchShopLis">
        <input
          type="search"
          placeholder="请输入商家或美食名称"
          v-model="keyword"
        />
        <input
          type="submit"
          value="提交"
          class="submit"
          style="font-size:0.3rem"
        />
      </form>
    </div>
    <div class="container" ref="container">
      <div>
        <div
          class="searchShoplis clearfix"
          v-for="(item, index) in searchShops"
          :key="index"
        >
          <div class="search_l">
            <img :src="img_url + item.image_path" alt="" />
          </div>
          <div class="search-r">
            <h3 class="overflow">
              {{ item.name }}
            </h3>
            <p class="sale">月售{{ item.recent_order_num }}单</p>
            <p class="distance">
              {{ item.float_delivery_fee }} 元起送/距离 {{ item.distance }}
            </p>
          </div>
        </div>
        <div class="noSearch" v-if="!searchShops.length">
          <h2>没有搜到相关内容</h2>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqSearchShop } from '../../api/index'
import { mapState } from 'vuex'
import BScroll from 'better-scroll'
export default {
  data() {
    return {
      // 搜索关键字
      keyword: '',
      // 维度
      latitude: 40.10038,
      // 经度
      longitude: 116.36867,
      // 图片基础路径
      img_url: 'http://cangdu.org:8001/img/',
      scroll: ''
    }
  },
  methods: {
    // 获取搜索商品列表
    async getSearchShopLis() {
      const geohash = this.latitude + ',' + this.longitude
      const keyword = this.keyword.trim()
      const res = await reqSearchShop(geohash, keyword)
      if (keyword) {
        this.$store.dispatch('getSearchShopAsync', res.data)
        this.updataShop()
      }
    },
    updataShop() {
      this.$nextTick(() => {
        const container = this.$refs.container
        this.scroll = new BScroll(container)
      })
    }
  },
  computed: {
    ...mapState(['searchShops'])
  },
  watch: {},
  mounted() {
    this.updataShop()
  }
}
</script>

<style lang="less">
.container {
  overflow: hidden;
  height: 550px;
}
.noSearch {
  h2 {
    font-size: 20px;
    text-align: center;
    color: #999;
  }
}
.search {
  height: 100%;
  overflow: hidden;
}
.hairlines {
  background-color: #fff !important;
}
.input-value {
  height: 1.5rem;
  display: flex;
  align-items: center;
  padding: 0 0.3rem;
  input {
    height: 0.9rem;
    width: 6.5rem;
    background-color: #f2f2f2;
    &:nth-child(1) {
      padding-left: 10px;
    }
  }
  .submit {
    height: 0.9rem;
    width: 1.5rem;
    background-color: #02a774;
    color: #fff;
    font-size: 18px;
    margin-left: 0.2rem;
    font-weight: 600;
  }
}
.searchShoplis {
  height: 80px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  display: flex;
  padding: 10px;
  .search_l {
    float: left;
    width: 25%;
    margin-right: 10px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .search-r {
    float: left;
    flex: 1;
    font-size: 15px;
    margin-top: 7px;
    font-weight: 550;
    h3 {
      font-size: 17px;
      font-weight: 550;
      width: 230px;
    }
    .sale {
      margin: 10px 0;
    }
  }
}
</style>
